<template>
	<view>
		<view class="bg-green status padding-lr padding-tb-xl text-center" style="background-color: #fe5337;">
			
			<view class="status text-xxl margin-tb-lg">
				<text class="cuIcon-time margin-right-sm"></text>
				<text v-if="order.orderStatus==`SUCCESS`">充值成功</text>
				<text v-else-if="order.orderStatus==`FAILED`">充值失败</text>
				<text v-else>充值中</text>
			</view>
		</view>
		<view class="padding-sm">
			
			<view class="bg-white ">
				<view class="content-c flex justify-between" style="align-items: center;">
					<view class="c-left flex" style="align-items: center;width: 80%;overflow: hidden;">
						<view class="cu-avatar radius  xl" :style="{ 'backgroundImage':'url('+ order.productImg +')' }" ></view>
						<view class="margin-left-sm padding-sm" style="width:70%;">
							<view class="margin-bottom-sm title text-cut text-bold text-black">
								{{order.productName}}
							</view>
							<view class="margin-bottom-sm text-gray text-sm">
								{{order.productSku}}
							</view>
							<view class="margin-bottom-sm">
								x{{order.productNum}}
							</view>
							
						</view>
					</view>
					<view class="c-right margin-right-sm text-right">
						<text class="text-price margin-left-sm text-xl">{{order.totalPrice}} 积分</text>
					</view>
				</view>
			</view>
			
			<view class="bg-white margin-top padding-tb">
				<view class="flex padding-lr justify-between">
					<view>
						订单编号
					</view>
					<view>
						{{order.orderCode}}
					</view>
				</view>
				<view class="flex padding-lr justify-between margin-top">
					<view>
						下单时间
					</view>
					<view>
						{{order.creatTime}}
					</view>
				</view>
				<view class="flex padding-lr justify-between margin-top">
					<view>
						总积分
					</view>
					<view class="text-price">
						{{order.totalPrice}} 积分
					</view>
					
				</view>
				<!-- 本地生活商品展示 -->
				<view class="" v-if="order.type === 'goods'">
					<view class="flex padding-lr justify-between margin-top" v-if="orderInfo">
						<view>
							取餐码
						</view>
						<view class="" v-for="(item,index) in orderInfo.codes" :key="index">
							 {{ item }}{{ index < orderInfo.codes.length - 1 ? ',' : '' }}
						</view>
					</view>
					<view class="flex padding-lr justify-between margin-top" v-if="orderInfo">
						<view v-if="orderInfo.qr_codes">
							取餐码二维码
						</view>
						<view class="" v-for="(item,index) in orderInfo.qr_codes" :key="index">
							<view class="" v-if="!order.showImg">
								<uqrcode ref="uqrcode" canvas-id="qrcode" :value="item" :options="{ margin: 10 }" style="width: 200px;height: 200px;"></uqrcode>
							</view>
							<view class="" v-if="order.showImg">
								<image :src="item" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" value="ite213123m" :options="{ margin: 10 }" style="width: 200px;height: 200px;"></uqrcode> -->
				<!-- 卡劵展示 -->
				<view class="" v-if="order.type === 'coupons' && orderInfo" v-for="(item,index) in orderInfo" :key="index">
					<view class="flex padding-lr justify-between margin-top" >
						<view>
							卡号
						</view>
						<view class="" @click="copyText(item.code)">
							 {{ item.code }}
						</view>
					</view>
					<view class="flex padding-lr justify-between margin-top" >
						<view>
							卡密钥
						</view>
						<view class="" @click="copyText(item.key)">
							{{item.key}}
						</view>
					</view>
					<view class="flex padding-lr justify-between margin-top">
						<view>
							卡激活 URL 地址
						</view>
						<a :href="item.url">
						      <view class="">
						        {{item.url}}
						      </view>
						    </a>
					</view>
					<view class="flex padding-lr justify-between margin-top" v-if="orderInfo">
						<view>
							有效开始时间
						</view>
						<view class="" >
							{{item.effstart}}
						</view>
					</view>
					<view class="flex padding-lr justify-between margin-top">
						<view>
							有效结束时间
						</view>
						<view class="" >
							{{item.effend}}
						</view>
					</view>
					<view class="flex padding-lr justify-between margin-top" v-if="item.extinfo">
						<view>
							其他信息
						</view>
						<view class="" >
							{{item.extinfo}}
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import uniQrcode from 'uniapp-qrcode';
	
	export default {
		data() {
			return {
				addressInfo:null,
				order:null,
				orderId:0,
				modalName:"",
				modalName1:"",
				weight:null,
				money:null,
				remarks:null,
				orderInfo:{},
				staff:{},
			}
		},
		onLoad(options) {
			this.staff =uni.getStorageSync("staff");
			this.order = JSON.parse(decodeURIComponent(options.order));
			this.handleCodes(this.order);
			console.log(this.order)
		},
		onShow() {
			// 获取uQRCode实例
			var qr = new UQRCode();
			// 设置二维码内容
			qr.data = "https://uqrcode.cn/doc";
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = 200;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		},
		methods: {
			// 可复制
			copyText(param) {
			      uni.setClipboardData({
			        data: param,
			        success: function () {
			          uni.showToast({
			            title: '复制成功',
			            icon: 'success',
			          });
			        },
			        fail: function () {
			          uni.showToast({
			            title: '复制失败',
			            icon: 'none',
			          });
			        },
			      });
			},
			
			// 处理各个渠道，各个品牌的 取餐码
			handleCodes(order){
				this.orderInfo = JSON.parse(this.order.orderInfo);
				console.log(this.orderInfo)
				
			},
			
			async getorder(){
				const RBD =await order({id:this.orderId});
				const { code, msg,data } = RBD;
				if(code==200){
					this.addressInfo=data.list.addressInfo;
					this.order=data;
				}
			},
			hideModal(e) {
				this.modalName = null;
			},
			showModal() {
				this.modalName ='Modal';
			},
			setClipboardText(){
				uni.setClipboardData({
					data: this.addressInfo.address
				});
			},
			hideModal1(e) {
				this.modalName1 = null;
			},
			showModal1() {
				this.modalName1 ='Modal';
			},
			async settlement(){
				if(this.weight==null || this.money==null){
					uni.showModal({
						title: '提示',
						content: '请完整填写',
					})
					return 
				}
				const RBD =await ConfirmOrder({orderId:this.orderId,weight:this.weight,money:this.money,remarks:this.remarks});
				const { code, msg,data } = RBD;
				if(code==0){
					uni.showModal({
						title: '提示',
						content: '操作成功',
					})
					uni.switchTab({
						url: '../order'
					});
				}else{
					uni.showModal({
						title: '提示',
						content: '服务器忙，请稍后重试',
					})
				}
			},
			async cancel(){
				const RBD =await CancelOrder({orderId:this.orderId});
				const { code, msg,data } = RBD;
				if(code==0){
					uni.showModal({
						title: '提示',
						content: '取消成功',
					})
					uni.switchTab({
						url: '../order'
					});
				}else{
					uni.showModal({
						title: '提示',
						content: '服务器忙，请稍后重试',
					})
				}
			}
		}
	}
</script>

<style>
.w-100{
	width: 100%;
}
.title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	width: 100%;
}	
.title1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	width: 100%;
	word-wrap: break-word;
}	
.assessment{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 10%;
		align-items: center;
		border-top: 1px solid #F0f0f0;
		align-items: center;
		z-index: 1000;
	}
</style>
